<template>
  <!-- 顶部导航 -->
  <van-nav-bar
    :title="ProInfo.name"
    left-text="返回"
    right-text="分享"
    left-arrow
    @click-right="showShare = true"
    @click-left="onClickLeft"
  />

  <van-swipe :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(val, index) in ProInfo.thumbs_cdn" :key="index">
      <img :src="val" alt="" />
    </van-swipe-item>
  </van-swipe>

  <div class="detailbox">
    <h4>{{ ProInfo.name }}</h4>
    <div class="price">
      <em>￥</em>{{ ProInfo.price }}<font>库存{{ ProInfo.stock }}件</font>
    </div>
  </div>

  <div class="clear"></div>
  <div class="allkbox"></div>
  <div class="clear"></div>
  <div class="detailbox_2" v-html="ProInfo.content"></div>
  <div style="padding:10px;color:black;font-size:15px;text-align:center;font-weight:700;background-color:#F5F5F5;">《==用户评论==》</div>
  <div v-if="RemmentList.length>0">
      <div class="rate" v-for="item in RemmentList" :key="item.id">
    <div class="user_img"><img :src="item.business.img"></div>
    <div class="user_content">
      <div class="user_rate">
        <div class="user_nick">{{item.business.nick}}</div>
        <van-rate v-model="item.rate" />
      </div>
      <div class="user_remment">{{item.comment}}</div>
      <div class="comment_img" v-if="item.photos_text.length>0">
        <div class="photo" v-for="(photo,index) in item.photos_text" :key="index">
          <img :src="photo">
        </div>
      </div>
      <div class="create_time">{{item.create_time}}</div>
    </div>
  </div>    
  </div>
  <div v-else style="font-size:15px;color:#ADD6FF;text-align:center;padding:20px;">该商品暂无用户评论</div>

   <div class="box"></div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :to="{ path: '/product/cart/index', query: { action: 'cart' } }"
    />
    <van-action-bar-button
      type="warning"
      text="加入购物车"
      @click="onCart(ProInfo.id)"
    />
    <van-action-bar-button 
    type="danger" 
    text="立即购买" 
    @click="toBuy"/>
  </van-action-bar>
  <van-share-sheet
    v-model:show="showShare"
    title="立即分享给好友"
    :options="options"
    @select="onSelect"
  />
</template>
<script>
import { showNotify, showConfirmDialog, showToast } from "vant";
export default {
  created() {
    let proid = this.$route.query.proid;

    this.proid = proid;

    this.getInfoData();
    this.getRemment();
  },
  data() {
    return {
      proid: 0,
      ProInfo: {},
      RemmentList:[],
      LoginUser: this.$cookies.get("LoginAuth"),
      showShare: false,
      proitem:[],
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async getRemment(){
       let data = {
        proid: this.proid,
      };

      let result = await this.$api.RemmentData(data);

      if (result.code === 1) {
        this.RemmentList = result.data;
        return false;
      } 
    },
    async getInfoData() {
      let data = {
        proid: this.proid,
      };

      let result = await this.$api.ProductInfo(data);

      if (result.code === 1) {
        this.ProInfo = result.data;
        return false;
      } else {
        showNotify({
          type: "warning",
          message: result.msg,
        });

        return false;
      }
    },
    onCart(proid) {
      if (!this.LoginUser || JSON.stringify(this.LoginUser) == "{}") {
        showToast({
          type: "fail",
          message: "请先登录",
          onClose: () => {
            showConfirmDialog({
              message: "是否需要登录",
            })
              .then(() => {
                this.$router.push("/user/base/login");
              })
              .catch(() => {});
          },
        });

        return false;
      }

      showToast({
        type: "loading",
        message: "加入购物车...",
        onClose: async () => {
          let data = {
            busid: this.LoginUser.id,
            proid: this.proid,
          };

          let result = await this.$api.CartAdd(data);

          if (result.code === 1) {
            showConfirmDialog({
              message: "是否需要去购物车结算？",
            })
              .then(() => {
                this.$router.push({
                  path: "/product/cart/index",
                  query: { action: "cart" },
                });
              })
              .catch(() => {});

            return false;
          } else {
            showNotify({
              type: "warning",
              message: result.msg,
            });

            return false;
          }
        },
      });
    },
    onSelect(option) {
      showToast(option.name);
      this.showShare = false;
    },
    toBuy(){
      this.$router.push({path:"/product/product/buy",query:{proid:this.ProInfo.id}});
    }
  },
};
</script>
<style scoped>
.box{
  margin-top: 50px;
}
.rate{
  display: flex;
  padding: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #EFEFEF;
}
.rate .user_img{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  overflow: hidden;
}
.detailbox_2{
  text-align: center;
  padding: 10px 50px;
}
.rate .user_content{
  flex: 1;
  margin-left: 10px;
}
.rate .user_content .user_rate .user_nick{
  font-size: 15px;
  font-family:'Times New Roman', Times, serif;
  color: black;
  font-weight: 700;
  margin-right: 20px;
}
.rate .user_content .user_rate{
  display: flex;
}
.rate .user_content .user_remment{
  font-size: 12px;
  font-family:'Times New Roman', Times, serif;
  color: black;
  font-weight: 700;
}
.rate .user_content .comment_img{
  display: flex;
}
.rate .user_content .comment_img .photo{
  width: 80px;
  /* height: 80px; */
  margin-right: 5px;
}
.rate .user_content .create_time{
  float: right;
}
</style>